<template>
  <div>
    <div class="ele-page-header">
      <div class="ele-page-title">荣誉资质产品</div>
    </div>
    <el-form ref="demoForm" :model="form" :rules="rules" label-width="150px">
      <div class="ele-body">
        <el-card shadow="never">
          <el-form-item label="所属企业："  prop="userId" v-any-role="['super_admin', 'admin']">
            <el-select v-model="form.userId" filterable placeholder="请选择所属企业" clearable style="width: 80%;">
              <el-option v-for="item in userList" :key="item.userId" :label="item.companyName" :value="item.userId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="荣誉名称：" prop="title">
            <el-input v-model="form.title" placeholder="请输入产品名称" clearable style="width: 80%;" />
          </el-form-item>
          <el-form-item label="简介：" prop="sketchs">
            <el-input type="textarea" v-model="form.sketchs" maxlength="200" show-word-limit placeholder="请输入产品简介"
              clearable style="width: 80%;" />
          </el-form-item>
          <el-form-item label="荣誉图：" prop="thumb">
            <upload-img class="logo" :type="uploadRules" v-model="form.thumb" :info="logoText">
            </upload-img>
          </el-form-item>
          <div class="add_header">
            <el-button @click="closeThis">取消 </el-button>
            <el-button type="primary" @click="submit">保存</el-button>
          </div>
        </el-card>
      </div>
    </el-form>
  </div>
</template>

<script>
import uploadImg from "@/components/upload-img";
import wangEditor from "@/components/wangEditor";
import { addHonor, updateHonor, getHonor } from '@/api/honor';
import {
  listUsers
} from '@/api/system/user';
export default {
  components: {
    uploadImg,
    wangEditor,
  },
  name: "HonorEdit",
  data() {
    return {
      uploadRules: ["image/jpeg", "image/jpg", "image/png"],
      logoText: "请上传荣誉图",
      isUpdate: false,
      // 企业信息
      userList: [],
      // 表单数据
      form: {
        flag: 0,
        recType: 1,
      },
      // 表单验证规则
      rules: {
        // userId: [{ required: true, message: "请选择所属企业", trigger: "blur" }],
        title: [{ required: true, message: "请输入荣誉名称", trigger: "blur" }],
        sketchs: [{ required: true, message: "请输入荣誉简介", trigger: "blur" }],
        thumb: [{ required: true, message: "请上传荣誉图", trigger: "blur" }],
      },
      // 分类列表
      classifyList: [],
    };
  },
  created() {
    console.log('This is the created method.');
    if (this.$route.query.id) {
      this.getFormData(this.$route.query.id);
      this.isUpdate = true;
    }
    // 获取企业信息
    if (this.$hasAnyRole(['super_admin', 'admin'])) {
      this.getUsers();
      // 给rules添加userId验证规则
      this.rules.userId = [{ required: true, message: "请选择所属企业", trigger: "blur" }];
    }

  },
  methods: {
    // 表单回显
    getFormData(id) {
      getHonor(id).then((res) => {
        this.form = res;
      });
    },

    /* 提交 */
    submit() {
      this.$refs["demoForm"].validate(async valid => {
        if (!valid) {
          return false;
        }
        this.loading = true;
        const data = {
          ...this.form,
        };
        const saveOrUpdate = this.isUpdate ? updateHonor : addHonor;
        saveOrUpdate(data)
          .then((msg) => {
            this.$message.success(msg);
            this.$router.push({
              path: "./index",
            });
          })
          .catch((e) => {
            this.loading = false;
            this.$message.error(e.message);
          });
      });
    },
    /* 关闭当前页面 */
    closeThis() {
      this.$router.push({
        path: "./index",
      });
    },
    // 获取企业信息
    getUsers() {
      listUsers({ types: 2 })
        .then((res) => {
          this.userList = res;
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
    },

  },
};
</script>

<style lang="scss" scoped>
// add_header 内容居中
.add_header {
  text-align: center;
  margin-top: 20px;
}
</style>
